import { createStore } from 'vuex'
import { testData, testPosts, ColumnProps, PostProps, UserProps } from '@/hooks/testData'
import { reqColumns, reqColumnDetail, reqLogin, reqUserInfo, reqRegister, reqPost } from '@/api/index.js'
import { useRouter } from 'vue-router'

export interface GlobalErrorProps {
  status: boolean;
  message?: string;
}

export interface GlobalDataProps {
  error: GlobalErrorProps
  loading: boolean;
  columns: ColumnProps[],
  posts: PostProps[],
  user: UserProps,
  token: string | null
}

export default createStore<GlobalDataProps>({
  state: {
    error: { status: false, message: '' },
    loading: false,
    columns: testData,
    posts: [],
    user: {
      isLogin: false,
      name: 'viking',
      columnId: '5f3e86d62c56ee13bb83096c'
    },
    token: null
  },
  getters: {
    getColumnById: (state) => (id: string) => {
      return state.columns.find(c => c._id === id)
    },
    getPostsByCid: (state) => (cid: string) => {
      return state.posts
    }
  },
  mutations: {
    setError(state, e: GlobalErrorProps) {
      state.error = e
    },
    setLoading(state, status) {
      state.loading = status
    },
    login(state) {
      state.user = { ...state.user, isLogin: true, name: 'viking' }
    },
    logout(state) {
      state.user = { ...state.user, isLogin: false }
    },
    createPost(state, newPost) {
      state.posts.push(newPost)
    },
    GETCOLUMNSLIST(state, columns) {
      state.columns = columns
    },
    GETCOLUMNDETAIL(state, columnDetail) {
      state.posts = columnDetail
    },
    LOGIN(state, token) {
      sessionStorage.setItem('TOKEN', token)
    },
    TOKEN(state) {
      state.token = sessionStorage.getItem('TOKEN')
    },
    GETUSERINFO(state, data) {
      state.user.columnId = data.column
      state.user.isLogin = true
      state.user.name = data.nickName
      state.user.id = data._id
    }
  },
  actions: {
    async getColumnsList({
      commit
    }) {
      const result = await reqColumns()
      if (result.code === 0) {
        commit('GETCOLUMNSLIST', result.data.list)
      }
    },
    async getColumnDetail({
      commit
    }, id) {
      const result = await reqColumnDetail(id)
      if (result.code === 0) {
        commit('GETCOLUMNDETAIL', result.data)
      }
    },
    async login({ commit }, params) {
      try {
        const result = await reqLogin(params)
        console.log(result)
        if (result.code === 0) {
          commit('LOGIN', result.data.token)
          const router = useRouter()
          return 'ok'
        } else {
          return Promise.reject(new Error(result.message))
        }
      } catch (error) {
        return Promise.reject(error)
      }
    },
    async register({ commit }, params) {
      try {
        const result = await reqRegister(params)
        if (result.code === 0) {
          return 'ok'
        } else {
          return Promise.reject(result.error)
        }
      } catch (error) {
        return Promise.reject(error)
      }
    },
    async getUserInfo({ commit }) {
      try {
        const result = await reqUserInfo()
        // console.log(result)
        if (result.code === 0) {
          commit('GETUSERINFO', result.data)
          return 'ok'
        } else {
          localStorage.removeItem('TOKEN')
          return Promise.reject(new Error(result.message))
        }
      } catch (error) {
        localStorage.removeItem('TOKEN')
        return Promise.reject(error)
      }
    },
    async newPost({ commit }, data) {
      try {
        const result = await reqPost(data)
        console.log(result)
        if (result.code === 0) {
          return 'ok'
        } else {
          return Promise.reject(new Error(result.message))
        }
      } catch (err) {
        console.log(err)
        return Promise.reject(err)
      }
    }
  },
  modules: {
  }
})
